{% extends "admin/custom_change_form.html" %}

{% block extrahead %}{{ block.super }}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=sk"></script>

<script type="text/javascript">

	var directionsService = new google.maps.DirectionsService();
    var map;
     
	function onLoad()
    {       
    	var nam_snp_ba = new google.maps.LatLng(48.1453, 17.1114);
	    var myOptions = {
        	zoom:7,
          	mapTypeId: google.maps.MapTypeId.ROADMAP,
  		  	center: nam_snp_ba
		}
	  	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		var stops = {{ stops|safe }};
		var num_stops = stops.length;
		
		// first stop marker
		new google.maps.Marker({ position: new google.maps.LatLng(stops[0].lat, stops[0].lng), 
			map: map, icon: 'http://thydzik.com/thydzikGoogleMap/markerlink.php?text=' + stops[0].num, tittle: stops[0].name});

		// last stop marker
		new google.maps.Marker({ position: new google.maps.LatLng(stops[num_stops - 1].lat, stops[num_stops - 1].lng), 
			map: map, icon: 'http://thydzik.com/thydzikGoogleMap/markerlink.php?text=' + stops[num_stops - 1].num, title: stops[num_stops -1].name});
		
		var route_waypts = [];	    						    						
		for (var l = 1; l < num_stops - 1; l++) 
		{
			new google.maps.Marker({ position: new google.maps.LatLng(stops[l].lat, stops[l].lng), 
				map: map, icon: 'http://thydzik.com/thydzikGoogleMap/markerlink.php?text=' + stops[l].num, title: stops[l].name});
			
			route_waypts.push({location:new google.maps.LatLng(stops[l].lat, stops[l].lng), stopover:true});
		}
		    						
		var m = 0;
		var max_waypts = 8;
		var orig = null;
		var dest = null;
		      											                				      							 	    												
		while (m < num_stops - 1)
		{
			var subroute_waypts = [];
			
			orig = new google.maps.LatLng(stops[m].lat, stops[m].lng);				                              

			if (m + max_waypts < num_stops - 1)
			{                               
				dest = new google.maps.LatLng(stops[m + max_waypts + 1].lat, 
			                                  stops[m + max_waypts + 1].lng);	        						    	        						    	        						                                  		
			}
			else
			{
				dest = new google.maps.LatLng(stops[num_stops - 1].lat, 
			                                  stops[num_stops - 1].lng);
			}
			
			subroute_waypts = route_waypts.slice(m, m + max_waypts);
			m += max_waypts + 1;	        						    						

			request = {
				origin:orig, 
				destination:dest,
				waypoints: subroute_waypts,	        								        							
				travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
				                			                			
			directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) 
				{   		      					      												                    					                    					                 			                    						                								      								      									      				      						
					var directionsRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});		        										 
					directionsRenderer.setMap(map);        							
					directionsRenderer.setDirections(response);		        								        						
				}
			});
					    								    					
		}
		
		
		
		
							 	 
    }
        
</script>

<style type="text/css">

.div3 {
	
	background-color:;background-image:url(""); background-repeat:repeat; background-position:center center;  color:;
	
	border:0px solid; border-color:;
	
	width:800px; height:700px; overflow:auto;
	
	position:absolute; z-index:2; left:50%; top:20%;
	
	margin-left:-350px; margin-top:25px; text-align:center;
	
	visibility:visible;}
</style>

{% endblock %}

{% block body-onload %}onLoad();{% endblock %}

{% block field_sets %}
	{% for fieldset in adminform %}
		<fieldset class="module aligned {{ fieldset.classes }}" style="width:auto; ">
		  {% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
		  {% if fieldset.description %}<div class="description">{{ fieldset.description|safe }}</div>{% endif %}
		  {% for line in fieldset %}
		      <div class="form-row{% if line.errors %} errors{% endif %} {% for field in line %}{{ field.field.name }} {% endfor %} ">
		      {{ line.errors }}
		      {% for field in line %}
		      <div{% if not line.fields|length_is:"1" %} class="field-box"{% endif %}>
		          {% if field.is_checkbox %}
		              {{ field.field }}{{ field.label_tag }}
		          {% else %}
		              {{ field.label_tag }}{{ field.field }}
		          {% endif %}
		          {% if field.field.field.help_text %}<p class="help">{{ field.field.field.help_text|safe }}</p>{% endif %}
		      </div>
		      {% endfor %}
		      </div>
		  {% endfor %}
		  
			<table>
		    	<thead>
		     	<tr>
		     		<th>Č. Zástavky</th>
		     		<th>Názov</th>
		     		<th>Poloha</th>
		     	</tr>
				</thead>
		
				<tbody>
					{% for mhd_link_stop in mhd_link_stops %}
							<tr class="{% cycle row1,row2 %}">
							<td>{{ mhd_link_stop.stop_number }}</td>
							<td>{{ mhd_link_stop.stop.name }}</td>
							<td>{{ mhd_link_stop.stop.lat }},{{ mhd_link_stop.stop.lat }}</td>
							{% if mhd_link_stop.stop.lat == 0.0 or mhd_link_stop.stop.lng == 0.0 %}
								<td><input type="button" value="Zamerať polohu" onclick="findLocation({{ mhd_link_stop.stop.id }})"/></td>						
							{% endif %}		
						</tr>	
					{% endfor %}
				</tbody>
			</table>			  		  
		</fieldset>
	{% endfor %}
{% endblock %}

{% block after_related_objects %}
<div id="map_canvas" class="div3"></div>

<input type="hidden" name="link_name" id="link_name" value="{{ link_name }}">
<input type="hidden" name="direction_id" id="direction_id" value="{{ direction_id }}">

{% endblock %}
